<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ElMessage, type ComponentSize } from 'element-plus'
import { OrdersModel } from '../assets/model/Orders';
import { cancelOrder, pay, queryPaid, queryUnPaid } from '../assets/net/NetUtils';
import { userInfoStore } from '../assets/userStore/userStore';

const userStore = userInfoStore();
const fill = ref(true)
const size = ref<ComponentSize>('default')
const paidList = ref<Array<OrdersModel>>()
const unPaidList = ref<Array<OrdersModel>>()
const hasPaid = ref<boolean>()
const hasUnPaid = ref<boolean>()

onMounted(() => {
    queryPaid(userStore.uid)
        .then((value) => {
            paidList.value = value.data as Array<OrdersModel>
            hasPaid.value = paidList.value.length === 0 ? true : false;
        })
    queryUnPaid(userStore.uid)
        .then((value) => {
            unPaidList.value = value.data as Array<OrdersModel>
            hasUnPaid.value = unPaidList.value.length === 0 ? true : false;
        })
})

const paid = (oid: number) => {
    pay(oid).then((value) => {
        if (value.code === 200) {
            ElMessage.success(value.data)
            queryPaid(userStore.uid)
                .then((value) => {
                    paidList.value = value.data as Array<OrdersModel>
                })
            queryUnPaid(userStore.uid)
                .then((value) => {
                    unPaidList.value = value.data as Array<OrdersModel>
                })
        } else {
            ElMessage.error("支付失败")
        }
    })
}

const cancel = (oid: number) => {
    cancelOrder(oid)
        .then((value) => {
            if (value.code === 200) {
                ElMessage.success(value.data);
                queryUnPaid(userStore.uid)
                    .then((value) => {
                        unPaidList.value = value.data as Array<OrdersModel>
                        hasUnPaid.value = unPaidList.value.length === 0 ? true : false;
                    })
            } else {
                ElMessage.error(value.data);
            }
        })
}
</script>

<template>
    <el-scrollbar height="100%" style="overflow-y: hidden;width: 100%;">
        <el-row style="width: 100%;" justify="center" align="middle">
            <el-col :span="24"><el-text style="font-size: large;">已支付订单</el-text></el-col>
            <el-empty v-show="hasPaid" description="您还没有已支付的订单～" />
            <el-col :span="24" style="margin-top: 1%;">
                <el-space wrap :size="size" :fill="fill" style="width: 100%;">
                    <div v-for="item in paidList" :key="item.oid">
                        <el-card shadow="hover" style="height: auto;">
                            <el-row style="width: 100%;">
                                <el-col :span="24">
                                    <el-row justify="space-between">
                                        <el-col :span="21"><el-text>订单编号：{{ item.oid }}</el-text></el-col>
                                        <el-col :span="3"><el-tag type="success">状态：已支付</el-tag></el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-divider></el-divider>
                                </el-col>
                                <el-col :span="24">
                                    <el-text style="font-size: large;">购买商品：{{ item.commodity?.commodityName
                                        }}</el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text style="color: red;">交易金额：¥{{ item.price }}</el-text>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-space>
            </el-col>
            <el-col :span="24" style="margin-top: 2%;"><el-text style="font-size: large;">待支付订单</el-text></el-col>
            <el-empty v-show="hasUnPaid" description="您还没有待支付的订单哦～" />
            <el-col :span="24" style="margin-top: 1%;">
                <el-space wrap :size="size" :fill="fill" style="width: 100%;">
                    <div v-for="item in unPaidList" :key="item.oid">
                        <el-card shadow="hover" style="height: auto;">
                            <el-row style="width: 100%;">
                                <el-col :span="24">
                                    <el-row>
                                        <el-col :span="21"><el-text>订单编号：{{ item.oid }}</el-text></el-col>
                                        <el-col :span="3"><el-tag type="warning">状态：待支付</el-tag></el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-divider></el-divider>
                                </el-col>
                                <el-col :span="24">
                                    <el-text style="font-size: large;">购买商品：</el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text style="color: red;">交易金额：¥{{ item.price }}</el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-row style="width: 100%;">
                                        <el-col :span="24" align="end" style="padding: 2%;">
                                            <el-button plain type="info" @click="cancel(item.oid!)">取消订单</el-button>
                                            <el-button plain type="danger" @click="paid(item.oid!)">立即支付</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-space>
            </el-col>
        </el-row>
    </el-scrollbar>
</template>